<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-27 09:01:00
 * @LastEditors: lg
 * @LastEditTime: 2024-03-07 15:17:25
 * @FilePath: \stell-mall\src\views\home\major\components\banner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-carousel
    :style="{ width: '100%' }"
    interval="5000"
    arrow="never"
    :pause-on-hover="false"
    height="810px"
  >
    <el-carousel-item
      v-for="(item, index) in bannerData.bannerLits"
      :key="item"
    >
      <div
        class="banner-view"
        :style="{
          background: `url('${item.banUrl}')`,
          backgroundSize: 'cover',
          backgroundRepeat: 'repeat'
        }"
      >
        <h1 :class="`h__banner${index + 1}`">{{ item.name }}</h1>
        <div v-show="index === 1" class="border"></div>
        <p :class="`p__banner${index + 1}`">{{ item.text }}</p>
        <div
          v-show="index === 1"
          class="border"
          style="margin-bottom: 110px;"
        ></div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>
<script lang="ts" setup>
import { bannerData } from '../constants';
</script>
<style lang="scss" scoped>
$color: #fff;
$textShadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@mixin --min--hBanner {
  height: 95px;
  font-size: 68px;
  color: $color;
  margin-bottom: 42px;
}
@mixin --min--berder {
  width: 656px;
  height: 0px;
  border: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    )
    1 1;
}
.banner-view {
  width: 100%;
  height: 810px;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  .border {
    @include --min--berder;
  }
  .h__banner1 {
    @include --min--hBanner;
    text-shadow: $textShadow;
  }
  .h__banner2 {
    @include --min--hBanner;
    text-shadow: $textShadow;
  }
  .h__banner3 {
    height: 59px;
    font-size: 42px;
    color: $color;
    text-shadow: $textShadow;
    margin-bottom: 28px;
  }
  .h__banner4 {
    @include --min--hBanner;
    text-shadow: $textShadow;
  }
  .h__banner5 {
    height: 84px;
    line-height: 84px;
    font-size: 60px;
    color: $color;
    text-shadow: $textShadow;
    margin-bottom: 28px;
  }
  .p__banner1 {
    width: 863px;
    height: 78px;
    margin-bottom: 90px;
    background: linear-gradient(
      82deg,
      rgba(22, 120, 255, 0) 0%,
      #1678ff 52%,
      rgba(22, 120, 255, 0) 100%
    );
    color: $color;
    font-size: 36px;
    line-height: 78px;
  }
  .p__banner2 {
    height: 50px;
    font-size: 36px;
    color: $color;
    line-height: 50px;
    margin: 8px 0;
  }
  .p__banner3 {
    width: 616px;
    height: 98px;
    font-size: 70px;
    color: $color;
    line-height: 82px;
    text-shadow: $textShadow;
    margin-bottom: 90px;
  }
  .p__banner4 {
    width: 863px;
    height: 78px;
    line-height: 78px;
    font-size: 36px;
    color: $color;
    background: linear-gradient(
      82deg,
      rgba(134, 135, 137, 0) 0%,
      #000000 52%,
      rgba(32, 36, 43, 0) 100%
    );
  }
  .p__banner5 {
    height: 95px;
    line-height: 95px;
    font-size: 68px;
    color: $color;
    text-shadow: $textShadow;
    margin-bottom: 50px;
  }
}
:deep(.el-carousel__indicators--horizontal) {
  bottom: 80px;
}
</style>
